import React from "react";
import { Card } from 'antd';
import Base01 from "./base01"
import Base02 from "./base02"
import Base03 from "./base03"
import Base04 from "./base04"
import Base05 from "./base05"
import Base06 from "./base06"

import { BrowserRouter as Router, Route, Switch, NavLink } from "react-router-dom";
class RouterList extends React.Component {
  render() {
    return (
      <div className="router">
        <Router>
          <div className="margin_left_sm">
            <h2>基础</h2>
            <ul className="nav2">
              <li><NavLink activeClassName="selected" to="/base/Base01">生命周期</NavLink></li>
              <li><NavLink activeClassName="selected" to="/base/Base02">props属性</NavLink></li>
              <li><NavLink activeClassName="selected" to="/base/Base03">State</NavLink></li>
              <li><NavLink activeClassName="selected" to="/base/Base04">click 方法</NavLink></li>
              <li><NavLink activeClassName="selected" to="/base/Base05">Refs和DOM</NavLink></li>
              <li><NavLink activeClassName="selected" to="/base/Base06">表单</NavLink></li>

            </ul>
          </div>

          <hr />
          <div className="padding_h_sm margin_top_lg">
            <Card style={{ background: '#ECECEC' }}>
              <Switch>
                <Route path="/base/Base01" component={Base01}></Route>
                <Route path="/base/Base02" component={Base02}></Route>
                <Route path="/base/Base03" component={Base03}></Route>
                <Route path="/base/Base04" component={Base04}></Route>
                <Route path="/base/Base05" component={Base05}></Route>
                <Route path="/base/Base06" component={Base06}></Route>

              </Switch>
            </Card>
          </div>

        </Router>
      </div>
    );
  }
}

export default RouterList;
